<template>
  <div class="">
    <!-- {{ userMolle }} -->
    <template v-if="!['ios'].includes(BrowserType.系统)">
      <XGPLAYER
        ref="xgplaye"
        :className="['video-box']"
        @planB="planB()"
        :poster="videoInfo.poster"
        :m3u8="videoInfo.m3u8"
        :rtmp="videoInfo.rtmp"
      ></XGPLAYER>
    </template>
    <template v-if="BrowserType.系统 == 'ios' && userMolle == 3">
      <VVP
        :poster="videoInfo.poster"
        :m3u8="videoInfo.m3u8"
        :rtmp="videoInfo.rtmp"
        @planB="planB()"
      >
      </VVP>
    </template>
    <template v-if="userMolle == 2">
      <Hls
        ref="videoHls"
        :className="['video-box']"
        @planB="planB()"
        :poster="videoInfo.poster"
        :m3u8="videoInfo.m3u8"
        :rtmp="videoInfo.rtmp"
      >
      </Hls>
    </template>
    <template v-if="userMolle == 1">
      <QNRTP
        :poster="videoInfo.poster"
        :m3u8="videoInfo.m3u8"
        :rtmp="videoInfo.rtmp"
      >
      </QNRTP>
    </template>
    <template v-if="userMolle == 0">
      <!-- <VCH
        :className="['video-box']"
        :vData="{ poster: streamInfo.cover, urlVideo: streamInfo.m3u8Stream }"
        @planB="planB"></VCH> -->
      <!-- <div :className="['video-box']">
        <video class="video-cover" controls preload="auto" width="100%" height="100%">
          <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4" />
          <source :src="streamInfo.m3u8Stream" type="application/x-mpegURL" />
        </video>
      </div> -->
    </template>
    <!-- prettier-ignore -->
    <!-- <div class="postest"> -->
    <!-- <pre style="color:#fff;">{{ videoInfo }}</pre> -->
    <!-- {{ videoInfo.m3u8 }} -->
    <!-- {{ videoInfo.rtmp }} -->
    <!-- {{ userMolle }} -->

    <!-- <button type="button" @click="test">test{{ userMolle }}</button> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { BrowserType } from '@/assets/BrowserType.js';
import { bus } from '@/bus.js';
export default {
  name: 'mVideo',
  components: {
    XGPLAYER: () => {
      return import('./XGPLAYER/xgplayer.vue');
    },
    QNRTP: () => {
      return import('./RTMP/qnrtp.vue');
    },
    Hls: () => {
      return import('./M3U8/Hls.vue');
    },
    VVP: () => {
      return import('./RTMP/vvp.vue');
    },
    // VCH: () => {
    //   return import('./M3U8/VCH.vue');
    // },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      BrowserType: BrowserType(),
      sys: 'ios',
      userMolle: 3,
      userKey: 'userInfo',
      videoInfo: {
        poster: '',
        m3u8: '',
        rtmp: '',
      },
      m3u8: '', //''https://pili-live-hls.topcj2.com/huaxun2017/6-test.m3u8,
      rtmp: '', //'rtmp://pili-live-rtmp.topcj2.com/huaxun2017/6-test',
    };
  },

  methods: {
    test: function() {
      bus.$emit('获得推流地址', {
        videoLiveUrl: 'https://pili-live-hls.topcj2.com/huaxun2017/6-test.m3u8',
        videoLiveUrlRtmp: 'rtmp://pili-live-rtmp.topcj2.com/huaxun2017/6-test',
      });
    },
    try2play: function() {
      this.$refs.videoHls.play();
    },
    planB: function(t) {
      this.$toasted.show('正在为您切换适合的频道', {
        type: 'success',
        duration: 1000 * 2,
      });
      if (this.userMolle > 0) {
        this.userMolle = this.userMolle - 1;
      } else {
        return;
      }
    },
  },
  mounted: function() {
    if (!this.isDev) {
      this.sys = BrowserType().系统;
    }
    // this.$toasted.show(this.sys, { duration: 1000 * 2 });
    // this.player.play();
    bus.$on('获得推流地址', (res) => {
      this.$set(this.videoInfo, 'poster', res.roomBgImg);
      this.$set(this.videoInfo, 'm3u8', res.videoLiveUrl);
      this.$set(this.videoInfo, 'rtmp', res.videoLiveUrlRtmp);
    });
  },
};
</script>

<style>
.video-box {
  width: 100%;
  height: 100%;
}
.postest {
  position: fixed;
  top: 0;
  left: 0;
  color: red;
}
</style>
